* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    width: 800px;
    margin: 100px auto;
}

hr{
    margin: 20px 0;
}
.movie-list {
    width: 100%;
    min-height: 400px;
    overflow: hidden;
}

.item {
    width: 25%;
    padding: 0 20px;
    position: relative;
    float:left;
    margin-bottom: 20px;
}

.item .title {
    position: absolute;
    width: 100px;
    height: 40px;
    bottom: 35px;
    left: 25px;
    color: white;
}

.item .rate {
    position: absolute;
    width: 100px;
    height: 40px;
    bottom: 35px;
    right: 25px;
    text-align: right;
    color: white;
}

.row{
    margin: 0 -20px;
}

.mask{
    position:absolute;
    bottom: 0px;
    left: 0px;
    height: 100px;
    background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.8));
    width: 170px;
    left: 20px;
}